<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="listQuery.nickName" placeholder="输入搜索关键字" style="width: 200px;" class="filter-item" />
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleUpload">导入</el-button>
        </div>

        <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="编号" type="index" prop="id" align="center" width="60"/>
            <el-table-column label="姓名" prop="workerName" align="center"/>
            <el-table-column label="手机号" prop="workerPhone" align="center"/>
            <el-table-column label="出勤天数" prop="workDay" align="center"/>
            <el-table-column label="基本工资" prop="workBasicWage" align="center"/>
            <el-table-column label="出勤奖金" prop="workDayBonus" align="center"/>
            <el-table-column label="加班费" prop="workOt" align="center"/>
            <el-table-column label="餐补" prop="workMealBonus" align="center"/>
            <el-table-column label="小时单价" prop="workHourPrice" align="center"/>
            <el-table-column label="小时总数" prop="workHourCount" align="center"/>
            <el-table-column label="应发合计" prop="workWage" align="center"/>
            <el-table-column label="预支款" prop="workAdvance" align="center"/>
            <el-table-column label="缺勤天数" prop="workMisDay" align="center"/>
            <el-table-column label="缺勤扣款" prop="workMisDeduct" align="center"/>
            <el-table-column label="水电费" prop="workWaterAndElec" align="center"/>
            <el-table-column label="住宿费" prop="workHotelExp" align="center"/>
            <el-table-column label="协议扣款" prop="workAgrDeduct" align="center"/>
            <el-table-column label="社保扣款" prop="workSocialDeduct" align="center"/>
            <el-table-column label="商业扣款" prop="workBusinessDeduct" align="center"/>
            <el-table-column label="个税" prop="workPersonalTax" align="center"/>
            <el-table-column label="其他扣款" prop="workOtherDeduct" align="center"/>
            <el-table-column label="实发工资" prop="workRealWage" align="center"/>
            <el-table-column label="工资备注" prop="desc" align="center"/>
        </el-table>
        <el-dialog :visible.sync="dialogFormVisible" title="导入工资文件">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="150px" style="width: 500px; margin-left:50px;">
                <el-form-item :label-width="formLabelWidth" label="选择文件">
                    <el-upload :file-list="temp.fileList" :action="host+'/admin/rddHourSalary'" :headers="headers" :limit="1" :on-success="handleSuccess" class="upload-demo">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="confirmHandler">关闭</el-button>
            </div>
        </el-dialog>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
    </div>
</template>

<script>
    import {
        fetchPayHourList
    } from "@/api/payment";
    import waves from "@/directive/waves"; // Waves directive
    import { parseTime } from "@/utils";
    import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
    export default {
        name: "ComplexTable",
        components: { Pagination },
        directives: { waves },
        filters: {
        },

        data() {
            return {
                tableKey: 0,
                list: [],
                total: 0,
                listLoading: true,
                sortOptions: [
                    { label: "全部", key: "0" },
                    { label: "已注册", key: "1" },
                    { label: "未注册", key: "2" }
                ],
                listQuery: {
                    pageNum: 1,
                    pageSize: 20
                },
                // calendarTypeOptions,
                dialogFormVisible: false,
                downloadLoading: false,
                formLabelWidth: "100px",
                temp: {},
                headers: { Authorization: 'Bearer ' + this.$store.state.user.token },
                host: process.env.BASE_API,
                rules: {}
            };
        },
        created() {
            this.getList();
        },
        methods: {
            confirmHandler() {
                this.dialogFormVisible = false
                this.getList();
            },
            handleSuccess(file, fileList) {
                this.temp.fileList = [];
                this.temp.fileList.push({
                    name: fileList.name,
                    url: file.data.file
                })
            },
            handleUpload() {
                this.temp = {};
                this.dialogFormVisible = true;
                this.$nextTick(() => {
                    this.$refs["dataForm"].resetFields();
                });
            },
            async getList() {
                this.listLoading = true;
                try {
                    const result = await fetchPayHourList(this.listQuery);
                    if (result.data.code === 0) {
                        this.list = result.data.data.pageData;
                        this.total = result.data.data.maxCount;
                    }
                    this.listLoading = false;
                } catch (err) {
                    console.log(err);
                    this.listLoading = false;
                }
            },

            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },

            formatSex(row) {
                return row.brokerSex === 0 ? '男' : '女';
            },

            formatStatus(row) {
                return row.disabled === 0 ? '有效' : '无效';
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v =>
                    filterVal.map(j => {
                        if (j === "registrationTime") {
                            return parseTime(v[j]);
                        } else if (j === 'userSex') {
                            return v[j] === '0' ? '女' : '男';
                        } else if (j === 'disabled') {
                            return v[j] === '0' ? '有效' : '无效';
                        } else {
                            return v[j];
                        }
                    })
                );
            }
        }
    };
</script>
